<template>
	<view class="container">
		<view class="data-group dis-flex data-base" @tap.stop="toPage" data-url="/pageUser/data/base">
			<image class="user-face" :src="userInfo.avatar.file_path"></image>
			<view class="user-info">
				<view class="user-info-main">
					<view class="user-info-name">{{ userInfo.nickName }}</view>
					<view class="user-info-symbol"><sex-age-symbol class=""></sex-age-symbol></view>
				</view>
				<view class="user-info-address">{{ addressString }}</view>
				<view class="user-info-hobby">
					<view class="user-info-hobby-item" v-for="item in hobbyList" :key="item.id">{{ item.name }}</view>
					<view class="user-info-hobby-item" v-if="hobbyList.length == 0">未添加兴趣</view>
				</view>
				<view class="data-group-edit">修改</view>
			</view>
		</view>
		<view class="data-group">
			<view class="data-group-title" @tap.stop="toPage" data-url="/pageUser/data/introduce">
				<image class="data-group-title-icon" src="@/static/images/mine/icon-data-introduce.png" mode="aspectFit"></image>
				<view class="data-group-title-text">个人介绍</view>
				<view class="data-group-edit">编辑</view>
			</view>
			<view class="data-group-introduce">{{ userBase.introduce || userInfo.introduce || '行走江湖，都保留了一份神秘感' }}</view>
		</view>
		<view class="data-group" v-if="basic.group_name">
			<view class="data-group-title">
				<image class="data-group-title-icon" :src="basic.icon" mode="aspectFit"></image>
				<view class="data-group-title-text">{{ basic.group_name }}</view>
				<view class="data-group-title-tip">(必填)</view>
				<view class="data-group-edit" @tap.stop="toPage" data-url="/pageUser/data/basic">修改</view>
			</view>
			<view class="data-group-content">
				<u-cell-group :border="false">
					<!--  -->
					<u-cell-item :key="index" :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="(param, index) in basic.params"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="data-group" v-if="coup.icon && userInfo.login_identity != 20" @tap.stop="toPage" data-url="/pageUser/data/coup">
			<view class="data-group-title">
				<image class="data-group-title-icon" :src="coup.icon" mode="aspectFit"></image>
				<view class="data-group-title-text">{{ coup.group_name }}</view>
				<view class="data-group-title-tip">(必填)</view>
				<view class="data-group-edit">修改</view>
			</view>
			<view class="data-group-content">
				<u-cell-group :border="false">
					<!--  -->
					<u-cell-item :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="(param, index) in coup.params" :key="index"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="data-group" v-for="group in groupList" :key="group.id">
			<view class="data-group-title">
				<image class="data-group-title-icon" :src="group.icon" mode="aspectFit"></image>
				<view class="data-group-title-text">{{ group.group_name }}</view>
				<view class="data-group-edit" @tap.stop="toPage" :data-url="`/pageUser/data/group?group_id=${group.group_id}`">修改</view>
			</view>
			<view class="data-group-content">
				<u-cell-group :border="false">
					<!--  -->
					<u-cell-item :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="(param, index) in group.params" :key="index"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
export default {
	components: { sexAgeSymbol },
	data() {
		return {
			userBase: {},
			basic: {},
			coup: {},
			groupList: [],
			titleStyle: {
				fontSize: '30rpx',
				fontWeight: '400',
				color: 'rgba(0,0,0,1)'
			},
			valueStyle: {
				fontWeight: 400,
				fontSize: '32rpx',
				color: 'rgba(151,151,151,1)'
			}
		};
	},
	computed: {
		addressString: function() {
			const userInfo = this.userInfo;
			if (!userInfo.country && !userInfo.province && !userInfo.city) {
				return '未填写所在地';
			} else {
				const addressList = [];

				if (userInfo.province) {
					addressList.push(userInfo.province);
				}
				if (userInfo.city) {
					addressList.push(userInfo.city);
				}
				if (userInfo.city) {
					addressList.push(userInfo.district);
				}
				return addressList.join(' ');
			}
		},
		hobbyList: function() {
			try {
				return this.userBase.label ? JSON.parse(this.userBase.label) : [];
			} catch (e) {
				return [];
			}
		}
	},
	onShow() {
		this.getUserData();
		setTimeout(() => {
			this.refreshUserInfo();
		}, 0);
	},
	methods: {
		getUserData() {
			// this.$u.api.getUserBasic().then(res => {
			// 	this.userBase = res.data.user;
			// 	this.basic = res.data.basic;
			// });
			// this.$u.api.getUserCoupData().then(res => {
			// 	this.coup = res.data.coup;
			// });
			// this.$u.api.getUserDataGroup().then(res => {
			// 	console.log(res);
			// });

			this.$u.api.getUserData().then(res => {
				this.userBase = res.data.user;
				const { basic, coup, group } = res.data.data;
				this.basic = basic;
				this.coup = coup;
				this.groupList = group;
			});
		},
		completeUserInfo() {
			uni.setNavigationBarTitle({
				title: this.userInfo.check_finish.finish_rate >= 100 ? '个人资料' : `已完成 ${this.userInfo.check_finish.finish_rate}%`
			});
		}
	}
};
</script>

<style lang="scss">
.data-group {
	position: relative;
	padding: 20rpx 0 0 30rpx;
	background-color: #fff;
	border-top: 4rpx solid rgba(248, 248, 248, 1);
	.data-group-edit {
		width: 72rpx;
		height: 36rpx;
		position: absolute;
		right: 38rpx;
		font-size: 26rpx;
		color: $theme-main-color;
		text-align: right;
	}
	&.data-base {
		border-top-width: 0;
		padding-right: 47rpx;
		padding-top: 57rpx;
		padding-bottom: 31rpx;
		.data-group-edit {
			top: 56rpx;
		}
		.user-face {
			width: 140rpx;
			height: 140rpx;
			border-radius: 70rpx;
			border: 2rpx solid rgba(255, 255, 255, 1);
		}
		.user-info {
			margin-left: 50rpx;
			flex: 1;
			.user-info-main {
				display: flex;
				height: 45rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				align-items: flex-end;
				margin-top: 6rpx;
				.user-info-name {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
					line-height: 45rpx;
					margin-right: 20rpx;
				}
				.user-info-symbol {
					padding-bottom: 0rpx;
				}
			}
			.user-info-address {
				margin-top: 12rpx;
				height: 33rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 33rpx;
				color: #000;
			}
			.user-info-hobby {
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				.user-info-hobby-item {
					padding: 0 11rpx;
					margin-top: 8rpx;
					margin-right: 10rpx;
					height: 30rpx;
					background: linear-gradient(180deg, rgba(237, 79, 93, 0.83) 0%, rgba(251, 122, 142, 1) 100%);
					border-radius: 15rpx;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.data-group-title {
		height: 60rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 37rpx;
		display: flex;
		align-items: center;
		position: relative;
		.data-group-title-icon {
			height: 45rpx;
			width: 45rpx;
			margin-right: 10rpx;
		}
		.data-group-title-text {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			letter-spacing: 2rpx;
			display: flex;
			align-items: center;
		}
		.data-group-title-tip {
			color: #f42424;
			font-weight: 700;
			font-size: 22rpx;
			margin-left: 10rpx;
		}
		.data-group-edit {
			top: 50%;
			margin-top: -18rpx;
		}
	}
	.data-group-introduce {
		padding-left: 50rpx;
		margin-top: 25rpx;
		min-height: 60rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #1a1a1a;
		line-height: 30rpx;
		letter-spacing: 2rpx;
	}
	.data-group-content {
		padding-top: 16rpx;
		padding-left: 14rpx;
	}
}
</style>
